import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:series_play/generated/assets.dart';
import 'package:series_play/widget/app_color.dart';
import 'package:series_play/widget/app_image.dart';
import 'package:series_play/widget/app_text.dart';

/// 分辨率选择
class VideoResolutionDialog extends StatefulWidget {
  const VideoResolutionDialog({super.key});

  @override
  State<VideoResolutionDialog> createState() => _VideoResolutionDialogState();
}

class _VideoResolutionDialogState extends State<VideoResolutionDialog> {
  final list = ['540P', '720P', '1080P'];
  var mIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16).w,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              AppImage.assetsWith18(Assets.imagesIcVideoResolution),
              4.5.horizontalSpace,
              AppText.title('分辨率', fontWeight: FontWeight.normal),
            ],
          ),
          20.verticalSpace,
          MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: AlignedGridView.count(
              itemCount: list.length,
              shrinkWrap: true,
              crossAxisCount: 3,
              crossAxisSpacing: 10.w,
              mainAxisSpacing: 10.w,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    if (index != mIndex) {
                      setState(() {
                        mIndex = index;
                      });
                    }
                  },
                  child: SizedBox(
                    width: double.infinity,
                    height: 32.w,
                    child: Stack(
                      children: [
                        Positioned.fill(
                          child: Container(
                            height: 32.w,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6).r,
                              border: Border.all(
                                width: 2.w,
                                color: index == mIndex
                                    ? AppColor.primary
                                    : const Color(0xCF434653),
                              ),
                            ),
                            alignment: Alignment.center,
                            child: AppText.title(
                              list[index],
                              fontWeight: FontWeight.normal,
                            ),
                          ),
                        ),
                        Positioned(
                          top: 0,
                          right: 0,
                          child: Visibility(
                            visible: index == mIndex,
                            child: Container(
                              padding: const EdgeInsets.symmetric(
                                horizontal: 6,
                              ).w,
                              height: 12.w,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(6).r,
                                  topRight: Radius.circular(6).r,
                                ),
                                gradient: LinearGradient(
                                  colors: [
                                    const Color(0xFFF54E23),
                                    const Color(0xFFF59A24),
                                  ],
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                ),
                              ),
                              alignment: Alignment.center,
                              child: AppText(
                                'VIP',
                                fontSize: 10,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
